<template>
  <div>
    <div class="ratio">
      <el-row type="flex" align="middle" class="item">
        <div class="title">兑换金额</div>
        <div class="price">￥{{ money }}</div>
      </el-row>
      <el-row type="flex" align="middle" class="item">
        <div class="title">所需积分</div>
        <div><edu-input-number :args="{ min: 1, precision: 0 }" :value.sync="credit" /></div>
      </el-row>
    </div>
  </div>
</template>

<script>
import EduInputNumber from '@public/form/input_number';
export default {
  components: {
    EduInputNumber
  },
  props: {
    value: {
      type: String,
      default: '1:100'
    }
  },
  data() {
    return {
      credit: this.value.split(':')[1],
      money: '1'
    };
  },
  watch: {
    credit(credit) {
      this.$emit('update:value', this.money + ':' + credit);
    }
  }
};
</script>

<style scoped lang="scss">
.ratio {
  .item {
    margin-bottom: 15px;
    ::v-deep.el-col {
      margin-right: 10px;
    }
    .title {
      margin-right: 10px;
    }
    .price {
      color: #f54030;
    }
  }
}
</style>
